<template>
  <div>

    <!-- 搜索区域 开始 -->
    <el-form :model="searchForm" :inline="true" size="small">
      <el-form-item label="查询日期：">
        <el-date-picker v-model="searchForm.searchTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索区域 end -->

    <!-- 基础信息 开始 -->
    <div class="base_info">
      <div class="cell">
        <div class="name">配置id：</div>
        <div class="txt">{{info.id}}</div>
      </div>
      <div class="cell">
        <div class="name">渠道id：</div>
        <div class="txt">{{info.channelId}}</div>
      </div>
      <div class="cell">
        <div class="name">渠道名称：</div>
        <div class="txt">{{info.channel}}</div>
      </div>
      <div class="cell">
        <div class="name">媒体：</div>
        <div class="txt">{{info.media}}</div>
      </div>
      <div class="cell">
        <div class="name">城市：</div>
        <div class="txt">{{info.city}}</div>
      </div>
    </div>
    <!-- 基础信息 end -->

    <!-- 操作区域 开始 -->
    <div class="link_groups">
      <el-button type="primary" size="small" @click="addCost">录入成本</el-button>
    </div>
    <!-- 操作区域 end -->

    <!-- 列表 开始 -->
    <div class="tab_box">
      <el-table class="el_table" :data="list" border size="small">
        <el-table-column label="id" prop="rationId"></el-table-column>
        <el-table-column label="成本日期" prop="inputDate"></el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column label="操作" prop="" width="120" align="center">
          <template slot-scope="{row}">
            <el-link type="primary" class="el_link" @click="editEvent(row)">编辑</el-link>
            <el-link type="danger" class="el_link" @click="remove(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表 end -->

    <!-- 编辑价格弹框 开始 -->
    <glsx-dialog :show="showPriceDialog" title="编辑" width="600px" :appendtobody="true" @close="closeDialog()">
      <el-form ref="editForm" :model="editForm" :rules="editFormRules" label-width="80px" size="small">
        <el-form-item label="id">
          <span>{{editForm.id}}</span>
        </el-form-item>
        <el-form-item label="日期">
          <span>{{editForm.inputDate}}</span>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="editForm.price" class="a_input"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="savePrice">保存</el-button>
        </el-form-item>
      </el-form>
    </glsx-dialog>
    <!-- 编辑价格弹框 end -->

  </div>
</template>
<script>
import EventBus from '@/utils/eventBus'
import GlsxDialog from '@/components/Dialog'
import {
  GETCHANNELPRICELIST,
  UPDATECHANNELPRICE,
  REMOVECHANNELPRICE
} from '@/api/channel'
import { deepClone, showToast, showModal } from '@/utils/util'
export default {
  name: 'CostDetail',
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: { GlsxDialog },
  data() {
    return {
      searchForm: {},
      showPriceDialog: false,
      editForm: {},
      list: [],
      editFormRules: {
        price: [{ required: true, message: '请输入单价', trigger: 'blur' }]
      },
      loading: false
    }
  },
  mounted() {
    this.getList()
    EventBus.$on('add.price.success', this.getList)
  },
  methods: {
    // 录入成本
    addCost() {
      EventBus.$emit('add.cost.info', this.info)
    },

    // 打开编辑弹框
    editEvent(row) {
      this.editForm = row
      this.showPriceDialog = true
    },

    // 关闭弹框
    closeDialog() {
      this.showPriceDialog = false
      this.editForm = {}
    },

    // 获取参数
    getParams() {
      const o = this.info
      const oParams = deepClone(this.searchForm)
      const m = oParams.searchTime
      oParams.rationId = o.id
      oParams.channelId = o.channelId
      oParams.media = o.media
      oParams.city = o.city
      if (m && m.length > 0) {
        oParams.startDate = m[0]
        oParams.endDate = m[1]
      }
      delete oParams.searchTime
      return oParams
    },

    // 获取列表
    getList() {
      const oParams = this.getParams()
      GETCHANNELPRICELIST(oParams).then((res) => {
        this.list = res.data || []
      })
    },

    // 保存数据
    savePrice() {
      const _this = this
      _this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false
        }
        const oParams = {}
        oParams.id = _this.editForm.id
        oParams.price = _this.editForm.price
        _this.loading = true
        UPDATECHANNELPRICE(oParams).then((res) => {
          _this.loading = false
          if (res.code != 200) {
            return false
          }
          showToast({
            message: '保存成功',
            type: 'success'
          })
          _this.getList()
          _this.closeDialog()
        })
      })
    },

    // 删除
    remove(row) {
      const _this = this
      showModal({
        message: '确认删除该成本吗？',
        showCancelButton: true,
        success: function() {
          REMOVECHANNELPRICE({ id: row.id }).then((res) => {
            if (res.code == 200) {
              showToast({
                message: '删除成功',
                type: 'success'
              })
              _this.getList()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.base_info {
  display: flex;
  align-items: center;
  margin: 10px 0;
  .cell {
    display: flex;
    align-items: center;
    margin: 0 20px 0 0;
  }
}
.tab_box {
  margin: 10px 0;
}
.a_input {
  width: 240px;
}
.el_link {
  margin: 0 10px;
}
</style>
